<template>
  <el-container style="background-color:aliceblue;">
    <el-header style="height: 100%;padding: 0;background-color: aliceblue;">
        <div style="background-color: cornflowerblue;height: 40px;">
          <el-col :span="8"><div class="index-title" style="line-height: 40px;color: white;">
            <router-link style="margin-right: 30px;color: white" :to="'/index'">数字后勤服务大厅</router-link>
            <a>运架中心</a>
            <a>服务监督</a>
          </div></el-col>
          <el-col :span="8"  style="line-height: 40px;color: white;"><div class="index-title"><a>膳食中心</a></div></el-col>
          <el-col :span="8">
            <div style="line-height: 40px;color: white;">
             <router-link style="margin-right: 30px;text-decoration: none;color: white;" :to="'/PersonalCenter'">{{user.accountName}}</router-link>
            </div>
            <div style="line-height: 40px;color: white;">
             <a href="javascript:void(0)" @click="logout()" style="position: absolute;top: 0px;margin-left: 300px;text-decoration: none;color: white;">退出登录</a>
            </div>
          </el-col>
        </div>

          <el-col :span="18"><div style="margin-top: 20px;"><img src="../../static/img/logo-repair.png"/></div></el-col>
          <el-col :span="6">
            <div class="index-repair-home">
              <div class="index-menu-box">
                <!-- style="display: none; -->
                <div class="index-box-text">
                  首页<br />
                  <span>Home</span>
                </div>
                <div class="index-menu-logo">
                  <img src="../../static/img/icon-home.png"/>
                </div>
              </div>
            </div>

            <div class="index-repair-notice" @click="jumpTo('/notice')">
                <div class="index-menu-box">
                  <div class="index-box-text">
                    通知<br />
                    <span>notice</span>
                  </div>
                <div class="index-menu-logo">
                  <img src="../../static/img/icon-notice.png"/>
                </div>
              </div>
            </div>

            <div class="index-repair-service" @click="jumpTo('/serviceGuide')">
              <div class="index-menu-box">
                <div class="index-box-text">
                  服务帮助<br />
                  <span>help</span>
                </div>
                <div class="index-menu-logo">
                  <img src="../../static/img/icon-notice.png"/>
                </div>
              </div>
            </div>
            </div></el-col>

    </el-header>

    <div class="index-divider">
      <el-divider></el-divider>
    </div>
    <el-main style="padding-top: 0;line-height: 90px;">
      <div style="width: 100%;height: 87.34px;">
      <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;margin-left: 30px;" @click="getRepairState(0)">全部</el-button>
      <el-button plain type="primary" style="padding: 20px 0 20px 0;width: 50px;" @click="getRepairState(1)">待受理</el-button>
      <el-button plain type="primary" style="padding: 20px 0 20px 0;width: 50px;" @click="getRepairState(2)">待派工</el-button>
      <el-button plain type="primary" style="padding: 20px 0 20px 0;width: 50px;" @click="getRepairState(3)">待接单</el-button>
      <el-button plain type="primary" style="padding: 20px 0 20px 0;width: 50px;" @click="getRepairState(4)">维修中</el-button>
      <el-button plain type="primary" style="padding: 20px 0 20px 0;width: 50px;" @click="getRepairState(6)">已驳回</el-button>
      <el-button plain type="primary" style="padding: 20px 0 20px 0;width: 50px;" @click="getRepairState(5)">已关闭</el-button>
      <el-button v-if="role.isStudent" type="primary" style="margin-left: 450px;" @click="jumpTo('/myrepair')">我要报修</el-button>
      </div>
      <div class="index-collapse">
        <!-- v-for动态展开 -->
        <el-collapse>
          <el-collapse-item id="myCollapse" title="展开筛选项">
            <span>维修区域</span>
              <el-radio-group v-model="selectArea" size="small">
                <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button v-for="(eachArea,index) in areaList"
              :label="eachArea.id"
              :key="eachArea.id">{{eachArea.areaName}}</el-radio-button>
              </el-radio-group>
            <el-divider></el-divider>
            <span>报修项目</span>
              <el-radio-group v-model="selectType" size="small">
                <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button v-for="(eachType,index) in typeList"
              :label="eachType.id"
              :key="eachType.id">{{eachType.projectName}}</el-radio-button>
              </el-radio-group>
            <el-divider></el-divider>
            <span>承修单位</span>
              <el-radio-group v-model="selectUnit" size="small">
                <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button v-for="(eachUnit,index) in unitList"
              :label="eachUnit.id"
              :key="eachUnit.id">{{eachUnit.unitName}}</el-radio-button>
              </el-radio-group>
            <el-divider></el-divider>
            <span>关键字</span>
            <span>按内容查询</span>
            <el-input
            style="width: 20%;"
              placeholder="请输入内容"
              v-model="contentLike"
              clearable>
            </el-input>
            <span>按报修人/报修电话查询</span>
            <el-input
            style="width: 20%;"
              placeholder="请输入内容"
              v-model="pNameOrPhoneLike"
              clearable>
            </el-input>
            <el-button icon="el-icon-search" circle @click="searchSubmit(current,size)"></el-button>
          </el-collapse-item>
        </el-collapse>
      </div>
      <el-container>
        <div style="width: 100%;height: 87.34px;">
          <span style="margin-right: 10px;">维修申报查看</span>
        <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;" @click="getAllDateInterval()">全部</el-button>
        <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;" @click="getThisYearInterval()">本年</el-button>
        <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;" @click="getThisMonthInterval()">本月</el-button>
        <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;" @click="getThisWeekInterval()">本周</el-button>
        <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;" @click="getYesterdayInterval()">昨天</el-button>
        <el-button type="primary" plain style="padding: 20px 0 20px 0;width: 50px;" @click="getTodayInterval()">今天</el-button>
      </div>
        <div class="block">
          <el-date-picker
            v-model="timeSelectObj"
            @input="dateSelectFormat(timeSelectObj)"
            @change="searchSubmit(current,size)"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-container>
    </el-main>
    <Manager :searchData="searchData"
    :areaList="areaList"
    :typeList="typeList"
    :unitList="unitList"
    :stateList="stateList"
    :acceptuserList="acceptuserList"
    :role="role"></Manager>
<!--    <MaintenanceWorker :searchData="searchData"
    :areaList="areaList"
    :typeList="typeList"
    :unitList="unitList"
    :stateList="stateList"
    :acceptuserList="acceptuserList"></MaintenanceWorker> -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-container>
</template>

<script>
  export default{
    name : "index",
    data(){
      return{
        user:"",
        selectArea:0,
        selectType:0,
        selectUnit:0,
        selectState:0,
        selectTime:[],
        areaList:[],
        typeList:[],
        unitList:[],
        stateList:["异常状态id","待受理","待派工","待接单","维修中","已关闭","已驳回"],
        acceptuserList:[],
        contentLike:"",
        pNameOrPhoneLike:"",
        timeSelectObj:[],
        searchData:[],
        size:5,
        current:1,
        total:0,
        role:{
          isStudent: JSON.parse(localStorage.getItem("user")).data.state == 2 ? true : false,
          isManager: JSON.parse(localStorage.getItem("user")).data.state == 0 ? true : false,
          isRepairer: JSON.parse(localStorage.getItem("user")).data.state == 1 ? true : false
        }
      }
    },
    methods:{
      logout(){
      	this.$http.get("/logout")
        localStorage.removeItem("user")
        location.reload()
      },
      test(){
        console.log(JSON.parse(localStorage.getItem("user")).data)
      },
      jumpTo(route){
        this.$router.push(route)
      },
      getAllArea(){
        this.$http.get("/getAllArea").then(resp=>{
          this.areaList = resp.data.data
        })
      },
      getAllType(){
        this.$http.get("/getAllType").then(resp=>{
          this.typeList = resp.data.data
        })
      },
      getAllUnit(){
        this.$http.get("/getAllUnit").then(resp=>{
          this.unitList = resp.data.data
        })
      },
      getAllAcceptuser(){
        this.$http.get("/account/getAllAccepter").then(resp=>{
          this.acceptuserList = resp.data.data
        })
      },
      getAllDateInterval(){
        this.selectTime = []
      },
      getThisWeekInterval(){
        var one_day = 86400000;
        var nowDate = new Date()
        var day = nowDate.getDay();
        var searchTime=[]
        // 设置时间为当天的0点
        nowDate.setHours(0);
        nowDate.setMinutes(0);
        nowDate.setSeconds(0);
        nowDate.setMilliseconds(0);
        var week_start_time = nowDate.getTime() - (day - 1) * one_day;
        var week_end_time = nowDate.getTime() + (8 - day) * one_day;
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(week_start_time)))
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(week_end_time-1)))
        this.selectTime = searchTime
      },
      getThisYearInterval(){
        var start_time = new Date()
        var end_time = new Date()
        var searchTime=[]
        // 设置时间为当天的0点
        start_time.setHours(0);
        start_time.setMinutes(0);
        start_time.setSeconds(0);
        start_time.setMilliseconds(0);
        start_time.setMonth(0);
        start_time.setDate(1);

        end_time.setHours(0);
        end_time.setMinutes(0);
        end_time.setSeconds(0);
        end_time.setMilliseconds(0);
        end_time.setMonth(0);
        end_time.setDate(1);
        end_time.setFullYear(end_time.getFullYear()+1)
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(start_time)))
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(end_time-1)))
        this.selectTime = searchTime
      },
      getThisMonthInterval(){
        var start_time = new Date()
        var end_time = new Date()
        var searchTime=[]
        // 设置时间为当天的0点
        start_time.setHours(0);
        start_time.setMinutes(0);
        start_time.setSeconds(0);
        start_time.setMilliseconds(0);
        start_time.setDate(1);

        end_time.setHours(0);
        end_time.setMinutes(0);
        end_time.setSeconds(0);
        end_time.setMilliseconds(0);
        end_time.setMonth(end_time.getMonth()+1);
        end_time.setDate(1);
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(start_time)))
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(end_time-1)))
        this.selectTime = searchTime
      },
      getYesterdayInterval(){
        var one_day = 86400000;
        var end_time = new Date()
        var searchTime=[]
        // 设置时间为当天的0点
        end_time.setHours(0);
        end_time.setMinutes(0);
        end_time.setSeconds(0);
        end_time.setMilliseconds(0);
        var start_time = end_time-one_day
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(start_time)))
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(end_time-1)))
        this.selectTime = searchTime
      },
      getTodayInterval(){
        var one_day = 86400000;
        var start_time = new Date()
        var searchTime=[]
        // 设置时间为当天的0点
        start_time.setHours(0);
        start_time.setMinutes(0);
        start_time.setSeconds(0);
        start_time.setMilliseconds(0);
        var end_time = start_time.getTime()+one_day
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(start_time)))
        searchTime.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(end_time-1)))
        this.selectTime = searchTime
      },
      getRepairState(state){
        this.selectState = state
      },
      dateFormat(fmt,date){
        let ret;
        let opt={
          "Y+":date.getFullYear().toString(),
          "m+":(date.getMonth()+1).toString(),
          "d+":date.getDate().toString(),
          "H+":date.getHours().toString(),
          "M+":date.getMinutes().toString(),
          "S+":date.getSeconds().toString()
        };
        for(let k in opt){
          ret = new RegExp("("+k+")").exec(fmt)
          if(ret){
            fmt = fmt.replace(ret[1],(ret[1].length==1)?(opt[k]):(opt[k].padStart(ret[1].length,"0")));
          }
        }
        return fmt;
      },
      dateSelectFormat(dateList){
        var buff = []
        for(var i in dateList){
          buff.push(this.dateFormat("YYYY-mm-dd HH:MM:SS",dateList[i]))
        }
        this.selectTime = buff
      },
      searchSubmit(current,size){
        console.log(this.pNameOrPhoneLike)
          this.$http.post("/repairInfo/showRepair",{
              current:current,
              size:size,
              repairState:this.selectState,
              repairArea:this.selectArea,
              repairType:this.selectType,
              repairUnit:this.selectUnit,
              dateInterval:this.selectTime,
              nmsl:this.pNameOrPhoneLike,
              contentLike:this.contentLike,
              //不要
              repairPersonId:"",
              repairUserId:""
          }
        ).then(resp=>{
          this.total=resp.data.data.total
          this.size=resp.data.data.size
          this.searchData = resp.data.data.records
          console.log(resp.data.data)
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        // console.log(this.current)
          this.searchSubmit(this.current,val)
      },
      //分页-改变页数
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
          this.searchSubmit(val,this.size)
      }
    },
    created(){
      this.user =JSON.parse(localStorage.getItem("user")).data
      this.getAllArea();
      this.getAllType();
      this.getAllUnit();
      this.getAllAcceptuser()
      this.searchSubmit(1,5);
    },
    watch:{
      selectTime(){
        this.searchSubmit(this.current,this.size)
      },
      selectState(){
        this.searchSubmit(this.current,this.size)
      }
    },
    components: {
      Manager: () => import("./Manger.vue")
      //MaintenanceWorker: ()=> import("./MaintenanceWorker.vue")
    }
  }
</script>

<style>
  .index-title a:hover{
    color: black;
  }
  .index-repair-home{
    float: left;
    width: 66px;
    height: 104px;
    position: relative;
  }
  .index-repair-notice{
    float: left;
    width: 66px;
    height: 104px;
    margin-left: 5px;
    position: relative;
  }
  .index-repair-service{
    float: left;
    width: 66px;
    height: 104px;
    margin-left: 5px;
    position: relative;
  }
  .index-menu-box{
    text-align: center;
    width: 66px;
    height: 104px;
  }
  .index-box-text{
      display: none;
  }
  .index-menu-logo{
    background-color: cornflowerblue;
    width: 66px;
    height: 44px;
    position: absolute;
    bottom: 0px;

  }
  .index-menu-logo img{
    position: absolute;
    left: 23px;
    bottom: 5px;
  }
  .index-repair-home:hover .index-box-text{
    display: block;
  }
  .index-repair-home:hover{
    background-color:cornflowerblue ;
  }
  .index-repair-notice:hover .index-box-text{
    display: block;
  }
  .index-repair-notice:hover{
    background-color:cornflowerblue ;
  }
  .index-repair-service:hover .index-box-text{
    display: block;
  }
  .index-repair-service:hover{
    background-color:cornflowerblue ;
  }
  .index-divider .el-divider--horizontal{
    margin: 3px 0 2px 0;
  }
  .index-collapse .el-collapse-item__arrow{
    margin: 0 0 0 0;
  }
  .index-divider .el-divider{
    background-color: #409eff;
  }
  .index-collapse .el-collapse-item__header{
    height: 35px;
    padding-left: 5px;
    background-color: #c0cbcc4d;
    margin-left: 50%;
    width: 10%;
  }
  #myCollapse .el-divider{
    margin: 5px 0 0 5px;
  }
/*  .index-menu-box{
    background-color: cornflowerblue;
  } */
</style>
